/*
* @Author: 王宸
* @Date:   2020-04-21 13:42:02
* @Last Modified by:   王宸
* @Last Modified time: 2020-04-21 14:04:01
*/


/* Config */
:root {
  --sk-size: 60px;
  --sk-color: rgb(51,51,51, 0.8);
}


/* Utility class for centering */
.sk-center { margin: auto; }

.sk-swing {
  width: var(--sk-size);
  height: var(--sk-size);
  position: relative;
  animation: sk-swing 1.8s infinite linear; 
}
  
.sk-swing-dot {
  width: 45%;
  height: 45%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: var(--sk-color);
  border-radius: 100%;
  animation: sk-swing-dot 2s infinite ease-in-out; 
}

.sk-swing-dot:nth-child(2) {
  top: auto;
  bottom: 0;
  animation-delay: -1s; 
}

@keyframes sk-swing {
  100% {
    transform: rotate(360deg); 
  } 
}

@keyframes sk-swing-dot {
  0%, 100% {
    transform: scale(0.2); }
  50% {
    transform: scale(1); 
  } 
}